<template>
  <div id="statistics">
    <dl>
      <dt class="title"><img :src="logImg" alt=""> <span>USDT 統計資料</span> </dt>
      <dt class="number">0.000000</dt>
      <dd class="pledge">我的质押</dd>
      <dt class="number">0.00000.00 <span class="perent">%</span></dt>
      <dd class="pledge">總质押</dd>
      <dt class="price-title">========== 价格 ==========</dt>
      <dd>1 Pearl = 334.2294$</dd>
      <dd>1 USDT = 1.0036$</dd>
      <dt class="award-title">======== Pearl 獎賞 ========</dt>
      <dd>可索取獎賞 : 0.0000 Pearl = $0.0000</dd>
      <dd>可索取獎賞 : 0.0000 Pearl = $0.0000</dd>
      <dd>可索取獎賞 : 0.0000 Pearl = $0.0000</dd>
      <dd>可索取獎賞 : 0.0000 Pearl = $0.0000</dd>
    </dl>
  </div>
</template>

<script>
import img from '@/assets/images/log.svg';
export default {
  props: {
    logImg: {
      type: String,
      default: img
    },
  },
  data() {
    return {
      img
    }
  },
};
</script>

<style lang="scss" scoped>
$font-color-emphasize: #5b2639;
$font-color-undertint: #aa8592;
dl {
  list-style: none;
  dd {
    margin: 0;
    padding: 0;
  }
}
#statistics {
  width: 360px;
  height: 440px;
  border: 1px solid #e2cfd5;
  border-radius: 12px;
  background: #f0e7ea;
  box-shadow: inset 1px 1px 0 #f7f2f4;
  padding: 24px;
  box-sizing: border-box;
  dl {
    font-size: 14px;
    color: $font-color-undertint;
  }
  .title {
    font-size: 22px;
    font-weight: 700;
    color: $font-color-emphasize;
    margin-bottom: 15px;
    img{
      width: 34px;
      height: 34px;
    }
    span{
      display: inline-table;
      vertical-align: text-top;
    }
  }
  .perent {
    font-size: 16px;
    color: $font-color-undertint;
  }
  .number {
    font-size: 28px;
    font-weight: 700;
    color: $font-color-emphasize;
  }
  .pledge {
    font-size: 14px;
    font-weight: 500;
    color: $font-color-undertint;
    margin-bottom: 15px;
  }
  .price-title,.award-title{
    padding: 10px 0;
  }
}
</style>
